<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
</head>
<style type="text/css">
	.main_div{
		margin : 15px;
	}
</style>

<body>

<form class="layui-form layui-form-pane" action="" id="form_add">
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-block">
    <!--lay-verify="required" 这个语句是自带的正则表达式，包含的意思是 该文本框不能为空(必填项) -->
      <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品副标题</label>
    <div class="layui-input-block">
      <input type="text" name="subtitle"  placeholder="请输入副标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">商品价格</label>
    <div class="layui-input-block">
      <input type="text" name="price" lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">商品库存</label>
    <div class="layui-input-block">
      <input type="text" name="stock" lay-verify="required" placeholder="请输入商品库存" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!--联动开始  -->
  <div class="layui-form-item">
    <label class="layui-form-label">商品分类</label>
    <div class="layui-input-inline">
      <select id="topCategory" lay-filter="topCategoryFilter">
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="categoryId" id="secondCategory">
        <option>--请选择二级分类--</option>
      </select>
    </div>
  <!--联动结束  -->
  
  <!--单选按钮开始  -->
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">商品状态</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="1" title="上架" checked="">
      <input type="radio" name="status" value="0" title="下架">
    </div>
  </div>
  <!--单选按钮结束  -->
  
  <!--上传图片开始  -->
  <div class="layui-form-item">
    <label class="layui-form-label">商品图片</label>
    <input type="hidden" name="mainImage" id="mainImage"/>
    <div class="layui-input-block layui-upload">
	  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
	  <div class="layui-upload-list">
	    <img width="150px" height="150px" class="layui-upload-img" id="mainImg">
	    <p id="demoText"></p>
	  </div>
	</div> 
  </div>
  <!--上传图片结束  -->
  
  <!--文本域开始  -->
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea id="editor_id" name= "detail" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <!--文本域结束  -->
  
  <!--提交按钮开始 -->
  <div class="layui-form-item">
    <input class="layui-btn" onclick="submitForm()" lay-filter="demo2" value="添加" />
  </div>
</form>
  <!--提交按钮结束 -->
          
<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/static/common/mylayer.js"></script>
<script src="${ctx}/static/common/util.js"></script>
<script src="${ctx}/static/lib/layui/layui.js"></script>
<script src="${ctx}/static/lib/kindeditor/kindeditor.js"></script>
<script src="${ctx}/static/lib/kindeditor/lang/zh_CN.js"></script>


<script>
layui.use(['form', 'upload' ], function(){
  var form = layui.form;
 	upload = layui.upload;
 	
 	form.render('select');//刷新select选择框渲染
 	//监听select选择
 	form.on('select(topCategoryFilter)',function(data){
 		console.log(data.elem);//得到select原始dom对象?
 		console.log(data.value);//得到被选中的值
 		console.log(data.othis);//得到美化后的DOM对象？
 		$.ajax({
 			url:"${ctx}/category/selectSecondCategory.action",//二级分类
 			type:"post",
 			data:{"topCategoryId":data.value},
 			dataType:"json",
 			success:function(resp) {
 				console.log(resp);
 				if(resp.code == util.SUCCESS) {
 					var html = "<option value = ''>请选择二级分类</option>";
 					var data = resp.data;
 					for(var i=0;i<data.length;i++) {
 						html += "<option value = '"+data[i].id+"'>"+data[i].name+"</option>"
 					}
 					$("#secondCategory").html(html);
 					form.render('select');//刷新select选择框渲染
 				}
 			}
 		});
 	});
  
  //图片上传
  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#uploadBtn'
	    ,url: '${ctx}/upload/uploadImg.action'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#mainImg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(resp){
	      //如果上传失败
	      if(resp.code == util.SUCCESS){
	    	  $("#mainImage").val(resp.data);
	      }
	      //上传成功
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	});
	//加载一级分类
	$(function(){
		$.ajax({
			url:"${ctx}/category/selectTopCategory.action",
			type:"post",
			dataType:"json",
			success:function(resp) {
				console.log(resp);
				if(resp.code == util.SUCCESS) {
					var html = "<option value=''>请选择一级分类</option>";
					var data = resp.data;
					for(var i = 0; i<data.length; i++) {
						/* 字符串拼接? */
						html += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
					}
					$("#topCategory").html(html);
				}
			}
		});
	});
	
	//ajax方式提交form表单
	function submitForm() {
		$.ajax({
			url:"${ctx}/product/add.action",
			//data 提交 ,serialize 序列化
			data:$('#form_add').serialize(),
			type:"post",
			dataType:"json",
			success:function(resp) {
				if(resp.code == util.SUCCESS) {
					mylayer.confirm("添加成功，是否跳转到列表界面？","${ctx}/product/getProductPage.action");
				}
				else{
					mylayer.errorMsg(resp.msg);
				}
			}
			
		});
	}
	
	var myKindEditor ;
	KindEditor.ready(function(K) {
	    var kingEditorParams = {
	         //指定上传文件参数名称
	         filePostName  : "file",
	         //指定上传文件请求的url。
	         uploadJson : '${ctx}/upload/uploadImgByEditor.action',
	         //上传类型，分别为image、flash、media、file
	         dir : "image",
	         afterBlur: function () { this.sync(); }
	   }
   var editor = K.editor(kingEditorParams);
   //富文本编辑器
   myKindEditor = KindEditor.create('#form_add[name=detail]', kingEditorParams);
 });

</script>

</body>
</html>